<template>
  <div class="p-list">
    <div class="p-list-title">
      问卷列表
      <a-icon
        class="add"
        type="plus"
        title="开始新增问卷~"
        @click="add"
      />
    </div>
    <div class="p-list-items">
      <div v-for="(item, index) in list" :key="index" class="p-item">
        <div class="p-item-title">
          <span>{{ item.questionnaire_name }}</span>
          <span>创建时间：{{ item.create_time }}</span>
        </div>
        <div>
          <a-button @click="preview(item)">预览</a-button>
          <a-button @click="edit(item, index)">编辑</a-button>
          <a-popconfirm
            title="确定删除吗?"
            ok-text="是"
            cancel-text="否"
            @confirm="delItem(item, index)"
          >
            <a-button type="danger">删除</a-button>
          </a-popconfirm>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getQuestionnaireList, preview, delQuestion } from '@/services/lowcodeService'
export default {
  data() {
    return {
      list: [],
    }
  },
  async created() {
    const list = await getQuestionnaireList()
    this.list = list
    // console.log(list)
  },
  methods: {
    add() {
      this.$router.push('./coding')
    },
    edit(item) {
      // console.log(item, index)
      this.$router.push(`./coding?id=${item.questionnaire_id}`)
    },
    delItem(item, index) {
      this.list.splice(index, 1)
      delQuestion({ id: item.questionnaire_id })
    },
    // 预览
    async preview(item) {
      const id = item.questionnaire_id
      const url = await preview(id)

      window.open(url)
    },
  },
}
</script>
<style lang="less" scoped>
@import "index.less";
</style>
